<template>
  <div class="status-div">
    <el-row>
      <el-col :span="3">
        <div class="d-flex">
          Status: <div class="circle l-margin" :class="statusObj.CSStatus ? 'online': 'offline'"></div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="d-flex">
          X: <div class="l-margin">{{ statusObj.CSPositionX }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="d-flex">
          Y: <div class="l-margin">{{ statusObj.CSPositionY }}</div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div class="d-flex">
          X轴速度: <div class="l-margin">{{ statusObj.CSSpeedX }}</div>
        </div>
      </el-col>
      <el-col :span="6"> 
        <div class="d-flex">
          Y轴速度: <div class="l-margin">{{ statusObj.CSSpeedY }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onBeforeMount, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { useCarStore } from '@/stores/car-module'
import { useWsStore } from '@/stores/ws-module'
import { initCarrySystem } from '@/api/wsObj.js'

const carStore = useCarStore()
const wsStore = useWsStore()
const statusObj = computed(() => wsStore['carrySystem'])
let wsObj = null

const initData = () => {
  carStore.pushData(statusObj.value.CSPositionX, statusObj.value.CSPositionY)
}

watch(statusObj, () => {
  initData()
})
onBeforeMount(() => {
  wsObj = initCarrySystem()
})
onMounted(() => {
  initData()
})
onBeforeUnmount(() => {
  wsObj?.disconnect()
})
</script>

<style lang="scss" scoped>
.l-margin {
  margin-left: 10px;
}
</style>